<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<nav>
	        <div id="menu_button_wrapper">
	            <div id="menu_button">
	                Menu&nbsp;&nbsp;
	                <div id="hamburger">
	                    <span></span>
	                    <span></span>
	                    <span></span>
	                </div>
	            </div>
	            <div class="clearfix"></div>
	        </div>
	        
	        <ul id="menu_list">
	            <li class="current_page"><a href="#">Home</a></li>
	            <li><a href="#">Audio</a></li>
	            <li><a href="#">Video</a></li>
	            <li><a href="#">About Us</a></li>
	            <li><a href="#">Contacts</a></li>
	        </ul>
	    </nav>
	</div>
	
	<script type="text/javascript">
		/**
		 * Utility to wrap the different behaviors between W3C-compliant browsers
		 * and IE when adding event handlers.
		**/

		function addListener(element, type, callback) {
		    if (element.addEventListener) {
		        element.addEventListener(type, callback);
		    } else if (element.attachEvent) {
		        element.attachEvent('on' + type, callback);
		    }
		}

		addListener(document, 'DOMContentLoaded', function () {
		    
		    var mq = window.matchMedia("(max-width: 760px)");
		    if (mq.matches) {
		        document.getElementById("menu_list").classList.add("hidden");
		    }

		    addListener(document.getElementById("menu_button"), 'click', function () {
		        document.getElementById("menu_list").classList.toggle("hidden");
		    });
		    
		    addListener(window, 'resize', function () {
		        var width = window.innerWidth ||
		                    document.documentElement.clientWidth ||
		                    document.body.clientWidth;
		        
		        if (width > 760) {
		            document.getElementById("menu_list").classList.remove("hidden");
		        } else {
		            document.getElementById("menu_list").classList.add("hidden");
		        }
		    });
		    
		});
	</script>
</body>
</html>